<template>
  <view class="myhouse-box">
    <view class="houseTitle-box">
      <u-cell-group>
        <u-cell-item title="我的房产" :arrow="false" label="如遇到房产信息显示不全，请联系物业"
          :title-style="{fontSize:'40rpx',fontWeight:700,color:'#000'}"
          :label-style="{fontSize: '20rpx', fontWeight: 500}">
        </u-cell-item>
      </u-cell-group>
    </view>

    <view class="houseList">
      <u-cell-group :border="false" class="house_list">
        <u-cell-item class="listIt" v-for="(item, index) in selectRoom" icon="home-fill" :title="item.label"
          :key="index" :arrow="false" arrow-direction="down">
          <text class="but-change" :class="item.value == houseName ? 'showChange' : ''"
            @click="changeHouse(item.value,item.label)">切换</text>
          <text class="but-current" :class="item.value == houseName ? ''  : 'showChange'">当前</text>
        </u-cell-item>
      </u-cell-group>
    </view>

  </view>
</template>

<script>
  import {
    householdinfo
  } from '@/api/base/householdinfoApi.js'
  import {
    setRoomApi
  } from '@/api/base/setRoom.js'
  import {
      detailInfoApi
  } from '@/api/base/getPropDetail.js'
  import {
    mapGetters
  } from 'vuex';
  export default {
    data() {
      return {
        houseId:'',
        houseName: 'null',
        selectRoom: [],
        form: {
          id: '',
          roomId: ''
        }
      }
    },

    mounted() {
      this.getHouseInfo(); //根据用户ID获取住房信息你
      this.getDetailInfo()
    },

    computed: {
      ...mapGetters(['user_info']),
    },

    methods: {
      changeHouse(value, label) {
        this.form.roomId = value
        this.form.id = this.user_info.id;
        console.log(this.form.id, '用户ID输出')
        console.log(value, '房屋id输出')
        console.log(label, '房屋名字输出')
        this.houseId = label
        
        //调用接口修改绑定房屋
        setRoomApi(this.form).then(respond => {
          console.log(respond);
          this.$toast({
            title: "切换成功",
          });
          this.houseName = this.form.roomId
         uni.$emit('houseId', this.houseId);
        })
      },
      //调用获取房屋信息接口
      getHouseInfo() {
        const proprietorId = this.user_info.id;
        console.log(this.user_info, 'this.user_info')
        householdinfo({
            proprietorId
          })
          .then(response => {
            const newSelectData = response.map(data => ({
              value: data.roomId,
              label: data.roomInfo
            }));
            this.selectRoom = newSelectData;
            console.log(this.selectRoom, 'this.selectRoom');
          })
          .catch(error => {
            console.error('获取列表失败', error);
          });
      },
      //获取setRoomId判断是否已经绑定了房屋
      getDetailInfo(){
          const id = this.user_info.id;
          detailInfoApi({
            id
          }).then(respond => {
          console.log(respond.setRoomId, '绑定的房屋');
          if(respond.setRoomId == ''){
            this.houseName = 'null'
          }else{
            this.houseName = respond.setRoomId
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .but-change {
    border: 1px solid $-color-but-wy;
    color: $-color-but-wy;
    border-radius: 50rpx;
    text-align: center;
    padding: 7rpx 20rpx;
  }

  .but-current {
    border: 1px solid $-color-but-wy;
    color: white;
    background-color: #ff7a21;
    border-radius: 50rpx;
    text-align: center;
    padding: 7rpx 20rpx;
  }

  .showChange {
    display: none;
  }
</style>